<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/wpui-admin/wp-ewallet-admin/static/plugin/layuimini/lib/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/wpui-admin/wp-ewallet-admin/static/plugin/layuimini/css/public.css" media="all">
    <link rel="stylesheet" href="/wpui-admin/wp-ewallet-admin/static/css/wp.css" media="all">

</head>
<body>
<div id="container" class="layuimini-container">
    <div class="layuimini-main">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
            <legend>初始赋值演示</legend>
        </fieldset>

        <form class="layui-form" lay-filter="userForm">
            <div class="layui-form-item">
                <label class="layui-form-label">输入框</label>
                <div class="layui-input-block">
                    <input type="text" name="username" lay-verify="required|customName" autocomplete="off" placeholder="请输入标题" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码框</label>
                <div class="layui-input-block">
                    <input type="password" name="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">选择框</label>
                <div class="layui-input-block">
                    <select name="interest" lay-filter="aihao">
                        <option value=""></option>
                        <option value="0">写作</option>
                        <option value="1">阅读</option>
                        <option value="2">游戏</option>
                        <option value="3">音乐</option>
                        <option value="4">旅行</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">复选框</label>
                <div class="layui-input-block">
                    <input type="checkbox" name="like[write]" title="写作">
                    <input type="checkbox" name="like[read]" title="阅读">
                    <input type="checkbox" name="like[daze]" title="发呆">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">开关</label>
                <div class="layui-input-block">
                    <input type="checkbox" name="close" lay-skin="switch" lay-text="ON|OFF">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">单选框</label>
                <div class="layui-input-block">
                    <input type="radio" name="sex" value="男" title="男" checked="">
                    <input type="radio" name="sex" value="女" title="女">
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">文本域</label>
                <div class="layui-input-block">
                    <textarea placeholder="请输入内容" class="layui-textarea" name="desc"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit="" lay-filter="submit-button">立即提交</button>
                </div>
            </div>
        </form>
        <!--<div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit="" lay-filter="submit-button" @click="save">立即提交2</button>
            </div>
        </div>-->

    </div>
</div>

<script src="/wpui-admin/wp-ewallet-admin/static/js/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="/wpui-admin/wp-ewallet-admin/global/wp.js" charset="utf-8"></script>
<script src="/wpui-admin/wp-ewallet-admin/static/plugin/layuimini/lib/layui/layui.js" charset="utf-8"></script>
<script src="/wpui-admin/wp-ewallet-admin/static/js/vue.js" charset="utf-8"></script>
<script src="/wpui-admin/wp-ewallet-admin/static/js/vue-i18n.js" charset="utf-8"></script>
<script src="/wpui-admin/wp-ewallet-admin/global/wp-i18n.js" charset="utf-8"></script>
<script src="/wpui-admin/wp-ewallet-admin/global/wp-project.js" charset="utf-8"></script>

<script>
    layui.use(['form', 'table'], function (){
        var form = layui.form, table = layui.table;
        var userVm = window.userVm;
        var vm = new Vue({
            el: '#container',
            i18n: wp.i18n(),
            data: {
                name:'张三'
            },
            mounted:function(){
                // 子页面vm对象
                if(window.onLoadFinish){
                    window.onLoadFinish(this);
                }

                // 表单设置
                this.initForm();
                // 表单值回填
                this.fillForm();

                // 子页面vm对象
                //alert(window.userId);
                //alert(window.parentVm.name);
                //userVm.add2();
            },
            methods:{
                initForm:function(){
                    var that = this;
                    // 需要的时候自定义验证规则
                    form.verify({
                        customName: function(value){
                            if(value.length < 5){
                                return '长度不够';
                            }
                        },
                        address: function(value){
                            if(value.length == 0){
                                return '地址不能为空';
                            }
                        }
                    });

                    //监听提交
                    form.on('submit(submit-button)', function(data){
                        that.save(data);
                        return false;
                    });

                },
                fillForm:function(){
                    alert(JSON.stringify(window.formData));
                    //表单初始赋值
                    form.val('userForm',{
                        "username": "贤心" // "name": "value"
                        , "password": "123456"
                        , "interest": 1
                        , "like[write]": true //复选框选中状态
                        , "close": true //开关状态
                        , "sex": "女"
                        , "desc": "我爱 layui"
                    })
                },
                save:function(data){
                    var loadIndex = wp.loading();
                    wp.httpPost({
                        url:wp.url('/wp/ewallet/upms/demo/saveDemo'),
                        data:data.field,
                        success:function(data){
                            wp.closeLoading(loadIndex);
                            layer.msg("保存成功");
                            window.close();
                            // 刷新父数据表格
                            userVm.search();
                        }
                    });
                },
                test:function(){
                    alert('call child');
                }
            }
        });
    });
</script>
<script>

</script>

</body>
</html>